<script setup>
import AMapLoader from '@amap/amap-jsapi-loader';
import { shallowRef } from '@vue/reactivity';
import { ref, onMounted, provide, computed } from 'vue';

const props = defineProps({
  id: String,
});

const map = shallowRef(null);
const AMap = ref(null);

provide('map', computed(() => map.value));
provide('AMap', computed(() => AMap.value));

async function init () {
  AMap.value = await AMapLoader.load({
    key: '758243bc2f718078ab06b843cdf7bf1e',             // 申请好的Web端开发者Key，首次调用 load 时必填
    version: '2.0',      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: [''],       // 需要使用的的插件列表，如比例尺'AMap.Scale'等
  });

  map.value = new AMap.value.Map(props.id, {  //设置地图容器id
    zoom: 14,//级别
    center: [116.397428, 39.90923],//中心点坐标
    viewMode: '3D'//使用3D视图
  });

}

onMounted(() => {
  init();
});
</script>

<template>
  <div :id="props.id">
    <slot />
  </div>
</template>
